<template>
    <div style="width: 100%; height: 100%;">
        <div class="account-age-chart"> <!-- 账龄分析的环形图表 -->

        </div>
    </div>    
</template>

<script>
import echarts from 'echarts'; 
export default {
    props: {
        colors: {
            type: Array,
            default: () => ['#027aff', '#f45c6e', '#ebb265', '#00adbe', '#ac65eb', '#4AEAB0', '#0073F2']
        },
        chartData: {
            type: Object,
            default: () => ({
                title: '',
                echartData: []
            })
        }
    },
    mounted() {
        this.setAccountAgeChart();
    },
    methods: {
        setAccountAgeChart() { // 账龄分析图表
            let myChart = echarts.init(this.$el.querySelector('.account-age-chart'));
            let color = [...this.colors];
            let echartData = this.chartData.echartData;
            let legendData = this.chartData.echartData.map(item => item.name);
            let title = this.chartData.title;
            // let echartData = [{
            //         name: "3个月内",
            //         value: "12.22"
            //     },
            //     {
            //         name: "4~6个月",
            //         value: "9.78"
            //     },
            //     {
            //         name: "7~12个月",
            //         value: "6.33"
            //     },
            //     {
            //         name: "1~2年",
            //         value: "4.21"
            //     },
            //     {
            //         name: "2年以上",
            //         value: "2.37"
            //     }
            // ];
            // let formatNumber = function(num) {
            //     let reg = /(?=(\B)(\d{3})+$)/g;
            //     return num.toString().replace(reg, ',');
            // }
            // let total = echartData.reduce((a, b) => {
            //     return a + b.value * 1
            // }, 0);
            let options = {
                color: color,
                title: [{
                    text: title,
                    color: 'rgba(0,0,0,0.85)',
                    top: '34%',
                    left: 'center'
                }],
                clockwise: false, // 饼图的扇区是否顺时针排布，默认是逆时针
                tooltip: {
                    show: true,
                    backgroundColor: '#FFFFFF',
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                    formatter: function(params) {
                        // return `${params.marker}${params.name} <br /><span style="margin-right: 16px"></span>${params.value}万`;
                        return `${params.marker}${params.name} <br />${params.value}万`;
                    }
                },
                legend: {
                    icon: "none",
                    orient: 'horizontal',
                    data: legendData, // ['3个月内', '4~6个月', '7~12个月', '1~2年', '2年以上'],
                    top: '70%',
                    align: 'center',
                    textStyle:  {
                        color: "rgba(0,0,0,0.85)",
                        fontWeight: 'bold',
                        lineHeight: 30,
                        rich: {
                            a: {
                                width: 80,
                                fontSize: 16,
                                fontWeight: 'bold',
                                align: 'left'
                            },
                            b: {
                                align: 'left'
                            },
                            circle0: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[0],
                                borderRadius: 4
                            },
                            circle1: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[1],
                                borderRadius: 4
                            },
                            circle2: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[2],
                                borderRadius: 4
                            },
                            circle3: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[3],
                                borderRadius: 4
                            },
                            circle4: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[4],
                                borderRadius: 4
                            },
                            circle5: {
                                width: 8,
                                height: 8,
                                backgroundColor: color[5],
                                borderRadius: 4
                            },
                        },
                    },
                    formatter: function (name) {
                        // console.log(name);
                        let index = 0;
                        var datas = options.series[0].data;
                        datas.forEach(function (v, i) {
                            if (v.name == name) {
                                index = i;
                            }
                        })
                        return [`{a| ${datas[index].value}万}`, `{circle${index}|}{b| ${name} }`].join('\n');
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['25%', '45%'],
                    center: ['50%', '36%'],
                    data: echartData,
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    labelLine: {
                        show: true,
                        length: 50,
                        length2: 20,
                        lineStyle: {
                            color: 'rgba(0,0,0,0.25)'
                        }
                    },
                    label: {
                        show: true,
                        formatter: params => {
                            return (
                                '{name|' + params.percent + '%}\n{value| }'
                            );
                        },
                        rich: {
                            name: {
                                fontSize: 14,
                                padding: [-36, 5, -20, 5],
                                color: 'rgba(0,0,0,0.65)',
                                fontWeight: 'bold'
                            },
                            value: {
                                backgroundColor: 'rgba(0,0,0,0.25)',
                                width: 1,
                                height: 8,
                                padding: [4, -1, 0, -1]
                            }
                        }
                    },
                }]
            };
            myChart.setOption(options);

            // var index = 0; //播放所在下标
            // var mTime = setInterval(function() {
            //     myChart.dispatchAction({
            //         type: 'showTip',
            //         seriesIndex: 0,
            //         dataIndex: index
            //     });
            //     index++;
            //     if(index >= echartData.length) {
            //         index = 0;
            //     }
            // }, 2000);
        }
    }            
}
</script>